<template>
  <div class="headers">
    <div class="logo">
      <!-- <span v-if="modeName ==1 ||modeName ==2">
        <img src="../public/image/hkh.png"
            alt="">
      </span> -->
      <span>
        <img src="../public/image/hky.png"
            alt="">
      </span>
    </div>
    <div class="name">
      <!-- <label>好客酒店商家管理平台</label> -->
      <label v-if="modeName ==1">“好客盈”直销管理系统DMS</label>
      <label v-if="modeName ==2">“好客盈”会员营销系统MMS</label>
      <label v-if="modeName ==3">“好客盈”数字酒店运营管理系统OMS</label>
      <label v-if="modeName ==4">“好客盈”数字酒店运营管理系统OMS</label>
    </div>
   
    <div class="help">
      <div class="message"
        v-has="'messagelist'">
        <div>
          <router-link class="message-style"
            to="/index/message">
            <i class="fa fa-bell"></i>
            <span v-show="count > 0">{{count}}</span>
          </router-link>
        </div>
      </div>
      <div class="servies"
        v-popover:servies>
        <div class="lx">
            <span slot="reference"><img src="../public/image/servies.png" alt=""></span>
            联系我们
        </div>
        <el-popover popper-class="header-popover  tck-popover"
          ref="servies"
          placement="bottom"
          width="479"
          trigger="click"
          v-model="visible">
          <p class="servies_content_text">您在使用过程中，有任何问题或优化建议，可通过如下方式与我们沟通，我们为您提供24小时服务！</p>
          <div class="lx-cont">
            <div class="out">
              <!-- <a to="/Foo"
                style="color: #6d2377;  5px;font-size:14px;"><i class="fa iconfont icon-qq" style="font-size:22px;width: 30px;float: left;margin-top: 1px;"></i> 2837354228</a> -->
                <a target="_blank" href="http://wpa.qq.com/msgrd?v=1&uin=2837354228&site=qq&menu=yes">
                  <img border="0" src="http://wpa.qq.com/pa?p=1:2837354228:10" alt="点击发送消息" title="点击发送消息" style="margin-top:5px;"/>
                </a>
            </div>      
            <div class="account">
              <a to="/Foo"
                style="color: #6d2377;  5px;font-size:14px;"><i class="fa iconfont icon-fuwudianhua" style="font-size:22px;width: 30px;float: left;margin-top: 1px;"></i> 400-030-5980</a>
            </div>
            <div class="out">
              <a to="/Foo"
                style="color: #6d2377;  5px;font-size:14px;"><i class="fa iconfont icon-youxiang" style="font-size:22px;width: 30px;float: left;margin-top: 1px;"></i> kefu@ihotelvip.com</a>
            </div>
          </div>           
          <div class="outs" style="text-align:center">
            <!-- <a to="/Foo"
              style="color: #6d2377; margin-left: 5px;"><img src="../public/image/code.jpg" alt="" style="width:134px;"></a> -->
              <img src="../public/image/code.jpg" alt="" style="width:110px;">
              <p style="text-align:center">好客云数字酒店公众号</p>
          </div>
          
        </el-popover>
      </div>      
      <div class="identity"
        v-popover:identity>       
        <span><img src="../public/image/user.png" alt=""></span> 
        {{name}}
        <el-popover popper-class="header-popover"
          ref="identity"
          placement="bottom"
          width="160"
          trigger="hover">
          <div class="account">
            <span class="fa fa-user-circle-o"></span>
            <router-link to="/index/account_information"
              style="color: #6d2377; margin-left: 5px;">账号信息</router-link>
          </div>
          <div class="out">
            <span class="fa fa-power-off"></span>
            <el-button type="text"
              style="margin-left: 5px;"
              @click="exit">退出登录</el-button>
          </div>
        </el-popover>
      </div>
  
    </div>
  </div>
</template>

<script>
import url from "@/public/js/config";

export default {
  name: "Headers",
  data() {
    return {
      num: 200,
      active: false,
      name: sessionStorage.account,
      settingItems: {
        Icon: [
          "easytrip-icon-account",
          "easytrip-icon-out",
          "easytrip-icon-account",
          "easytrip-icon-out"
        ]
      },
      supplier: false,
      company: false,
      accountcfg: false,
      departmentandstaff: false,
      count: null,
      userId: "",
      modeName: "",
      dialogVisible: true,
      visible: false
    };
  },
  created() {
    window.bus.$on("messageCount", res => {
      this.count = res;
    });
    this.modeName = sessionStorage.getItem("modeName");
  },
  methods: {
    exit() {
      sessionStorage.clear();
      this.$router.push("/");
    }
  }
};
</script>
<style lang="scss">
.tck-popover {
  margin-top: 0 !important;
  padding: 16px 20px !important;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
  height: 222px;
  left: unset !important;
  right: 84px !important;
  .servies_content_text {
    width: 451px;
    height: 32px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: rgba(109, 35, 119, 1);
  }
  .account,
  .out {
    padding: 0 30px 0 11px !important;
    line-height: 25px !important;
    span {
      font-size: 16px;
    }
  }
  .outs {
    position: absolute;
    top: 66px;
    right: 60px;
  }
}
</style>

<style scoped lang="scss">
.lx-cont {
  margin-top: 24px;
}

.headers {
  overflow: auto;
  height: 64px;
  .logo {
    width: 200px;
    float: left;
    margin-top: 8px;
    span {
      display: block;
      width: 68%;
      margin-left: 14px;
      img {
        width: 100%;
      }
    }
  }
  .toggle {
    width: 300px;
    float: left;
    height: 64px;
    padding-left: 100px;
    display: flex;
    & > a {
      line-height: 64px;
      flex: 1;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }
  .name {
    float: left;
    text-align: left;
    font-size: 24px;
    margin-top: 15px;
  }
  .help {
    overflow: hidden;
    font-size: 16px;
    .identity,
    .setting,
    .servies {
      height: 64px;
      line-height: 64px;
    }
    .identity:hover,
    .setting:hover,
    .servies:hover {
      background-color: #1f88f0;
    }
    .el-tooltip {
      cursor: pointer;
    }
    .identity {
      min-width: 115px;
      float: right;
      padding-left: 4px;
      box-sizing: border-box;
      div:hover {
        background-color: #ebf5ff;
        color: #6d2377;
      }
      span {
        margin-left: 10px;
        display: inline-block;
        width: 24px;
        line-height: 1;
        vertical-align: middle;
        img {
          width: 100%;
        }
      }
    }
    .setting.active {
      background-color: #1f88f0;
    }
    .setting {
      float: right;
      width: 84px;
      span {
        display: inline-block;
        width: 24px;
        line-height: 1;
        vertical-align: middle;
        img {
          width: 100%;
        }
      }
    }
    .servies,
    .message {
      width: 110px;
      float: right;
      span {
        display: inline-block;
        width: 27px;
        line-height: 1;
        vertical-align: middle;
        img {
          width: 100%;
        }
      }
    }
    .message {
      width: 84px;
      font-size: 22px;
      line-height: 64px;
      .message-style {
        display: inline-block;
        width: 100%;
        color: #fff;
        position: relative;
        span {
          position: absolute;
          top: 10px;
          right: 20px;
          background-color: red;
          color: #fff;
          width: 18px;
          height: 18px;
          line-height: 18px;
          border-radius: 50%;
          font-size: 12px;
          text-align: center;
        }
      }
    }
    .message:hover {
      background-color: #1f88f0;
    }
  }
}
.account,
.out {
  padding: 5px;
  margin-bottom: 10px;
}
.settingbg {
  background-color: #1f88f0;
}
</style>
